﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Element/Element.Style</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:setStyle">setStyle</a></div>
			<div class="menu-item"><a href="#Element:getStyle">getStyle</a></div>
			<div class="menu-item"><a href="#Element:setStyles">setStyles</a></div>
			<div class="menu-item"><a href="#Element:getStyles">getStyles</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Custom Type to allow all of its methods to be used with any DOM element via the dollar function <a href="Element.html#Window:dollar">$</a>.</p>

<h2 id="Element:setStyle"><a href="#Element:setStyle">Element Method: setStyle</a></h2>

<p class="description">Sets a CSS property to the Element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">setStyle</span><span class="br0">(</span>property, value<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>property - (<em>string</em>) The property to set.</li>
<li>value    - (<em>mixed</em>) The value to which to set it. Numeric values of properties requiring a unit will automatically be appended with 'px'.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This element.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="co1">//Both lines have the same effect.</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'width'</span>, <span class="st0">'300px'</span><span class="br0">)</span>; <span class="co1">// the width is now 300px.</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'width'</span>, <span class="nu0">300</span><span class="br0">)</span>; <span class="co1">// the width is now 300px.</span>
</pre>

<h3>Notes:</h3>

<ul>
<li>All number values will automatically be rounded to the nearest whole number.</li>
</ul>
<h2 id="Element:getStyle"><a href="#Element:getStyle">Element Method: getStyle</a></h2>

<p class="description">Returns the style of the Element given the property passed in.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> style = myElement.<span class="me1">getStyle</span><span class="br0">(</span>property<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>property - (<em>string</em>) The css style property you want to retrieve.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>string</em>) The style value.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">getStyle</span><span class="br0">(</span><span class="st0">'width'</span><span class="br0">)</span>; <span class="co1">// returns "300px".</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">getStyle</span><span class="br0">(</span><span class="st0">'width'</span><span class="br0">)</span>.<span class="me1">toInt</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// returns 300.</span>
</pre>

<h2 id="Element:setStyles"><a href="#Element:setStyles">Element Method: setStyles</a></h2>

<p class="description">Applies a collection of styles to the Element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">setStyles</span><span class="br0">(</span>styles<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>styles - (<em>object</em>) An object of property/value pairs for all the styles to apply.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This element.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">setStyles</span><span class="br0">(</span><span class="br0">{</span>
    border: <span class="st0">'1px solid #000'</span>,
    width: <span class="nu0">300</span>,
    height: <span class="nu0">400</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="#Element:getStyle">Element:getStyle</a></li>
</ul>
<h2 id="Element:getStyles"><a href="#Element:getStyles">Element Method: getStyles</a></h2>

<p class="description">Returns an object of styles of the Element for each argument passed in.</p>

<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> styles = myElement.<span class="me1">getStyles</span><span class="br0">(</span>property<span class="br0">[</span>, property2<span class="br0">[</span>, property3<span class="br0">[</span>, ...<span class="br0">]</span><span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>properties - (<em>strings</em>) Any number of style properties.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) An key/value object with the CSS styles as computed by the browser.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">getStyles</span><span class="br0">(</span><span class="st0">'width'</span>, <span class="st0">'height'</span>, <span class="st0">'padding'</span><span class="br0">)</span>;
<span class="co1">// returns {width: '10px', height: '10px', padding: /10px 0px 10px 0px'}</span>
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="#Element:getStyle">Element:getStyle</a></li>
</ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>